<!--
 * @author guojiteng
 闯关排行
 -->
<template>
  <section class="answer-rush-rank">
    <el-tabs v-model="active" @tab-click="handleTabClick">
      <!-- <el-tab-pane label="总积分排行" name="1" /> -->
      <el-tab-pane label="闯关排行" name="2" />
      <!-- <el-tab-pane label="专项答题排行" name="3" /> -->
    </el-tabs>

    <section class="main-inner">
      <template v-if="active === '1'">总积分排行</template>
      <template v-else-if="active === '2'">
        <el-row :gutter="10">
          <el-col :span="6">
            <section class="inner-search">
              <section class="search-item">
                <div class="item-label">真实姓名</div>
                <el-input v-model="search.userRealName" style="width: 100%;" class="filter-item" clearable placeholder="请输入真实姓名筛选" />
              </section>
              <section class="search-item">
                <div class="item-label">所属闯关</div>
                <el-select v-model="search.rushQuestionId" placeholder="请选择闯关">
                  <el-option key value label="全部" />
                  <el-option v-for="item in rushs" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </section>
              <section class="search-item">
                <el-button size="small" type="primary" @click="handleFilter">筛 选</el-button>
                <el-button size="small" type="primary" @click="handleReset">重 置</el-button>
              </section>
            </section>
          </el-col>
          <el-col :span="18">
            <section class="inner-table">
              <el-table v-loading="listLoading" :data="list" style="width: 100%">
                <el-table-column prop="rank" label="排名" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.rank == 1" class="svg-container medal">
                      <svg-icon icon-class="gold-medal" />
                    </span>
                    <span v-if="scope.row.rank == 2" class="svg-container medal">
                      <svg-icon icon-class="silver-medal" />
                    </span>
                    <span v-if="scope.row.rank == 3" class="svg-container medal">
                      <svg-icon icon-class="copper-medal" />
                    </span>
                    <span v-if="scope.row.rank > 3" class="svg-container">{{ scope.row.rank }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="userView" label="头像" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px;" :src="view + scope.row.userView" :preview-src-list="[ view + scope.row.userView]">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline" />
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="userRealName" label="真实姓名" align="center" show-overflow-tooltip />
                <el-table-column prop="deptName" label="部门名称" align="center" show-overflow-tooltip />
                <el-table-column prop="scoreTotal" label="总分数" align="center" show-overflow-tooltip />
              </el-table>
              <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
            </section>
          </el-col>
        </el-row>
      </template>
      <template v-else>答题闯关排行</template>
    </section>
  </section>
</template>
<script>
import Pagination from '@/components/Pagination'
import { queryRushRank, queryRush } from '../api'
export default {
  name: 'AnswerRushRank',
  components: { Pagination },
  data() {
    return {
      active: '2',
      view: '/API-DOCUMENT/document/file/download?id=',
      search: {
        userRealName: '',
        rushQuestionId: ''
      },
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      listLoading: false,
      list: [],
      rushs: []
    }
  },
  created() {
    // this.getList()
    // this.getRush()
  },
  methods: {
    handleTabClick() {
      console.log(this.active)
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleReset() {
      this.search.userRealName = ''
      this.search.rushQuestionId = ''
      this.getList()
    },

    getRush() {
      return new Promise((resolve, reject) => {
        queryRush({ status: '' }).then(res => {
          this.rushs = res.data.data || []
        }).catch(error => {
          reject(error)
        })
      })
    },

    getRushRank(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        userRealName: this.search.userRealName,
        rushQuestionId: this.search.rushQuestionId
      }
      return new Promise((resolve, reject) => {
        queryRushRank(query).then(response => {
          this.listLoading = false
          this.list = response.data.data.rows
          this.total = response.data.data.total
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    },

    getList(obj) {
      if (this.active === '2') {
        this.getRushRank(obj)
      }
    }
  }
}
</script>
<style lang="scss">
.answer-rush-rank {
  padding: 10px;
  .el-tabs {
    padding: 0 10px;
    background-color: #fff;
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
  }

  .main-inner {
    margin-top: 10px;
    .inner-search {
      background-color: #fff;
      padding: 10px;
      .search-item {
        margin-bottom: 10px;
        .item-label {
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }

        .el-input,
        .el-select {
          width: 100%;
        }
      }
    }

    .inner-table {
      .medal {
        font-size: 24px;
      }

      .el-image .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
      }
    }
  }
}
</style>
